// 按钮
.btn {
  min-width: 100px;
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid #666797;
  background: #3e407c;
  text-align: center;

  &.active {
    border-color: #8187f4;
    background: linear-gradient(to bottom, #6069f1, #467cf1);
  }

  &--large {
    padding: 5px 10px;
    font-size: 15px;
  }
}

// 表格
.table {
  border-bottom: none;
  border-right: none;
  padding: 10px;
  border-radius: var(--border-radius);
  background-color: rgba($color: #000000, $alpha: 0.2);

  .th,
  .tr {
    display: flex;
  }

  .th {
    font-size: 14px;
    text-align: center;
  }

  .td {
    @extend .flex-center;
    display: flex;
    flex: 1 0;
    min-height: 35px;
    padding: 5px 0;
    word-break: break-all;
  }
}

// 横向滚动列表
.scroll-x {
  white-space: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory; // 滚动完毕后，让子元素拥有一个停靠的边界（强制停靠）

  &__item {
    display: inline-block;
    scroll-snap-align: center; // 父元素滚动完毕后，子元素停靠在左侧

    &:not(:last-child) {
      margin-right: 15px;
    }
  }
}

// 数据列表
.list {
  &--border {
    .list__item {
      &:not(:last-child) {
        @extend .bd-bottom;
      }
    }
  }

  // 底部边距列表
  &--mb-10 {
    .list__item {
      &:not(:last-child) {
        @extend .mb-10;
      }
    }
  }

  &--mb-15 {
    .list__item {
      &:not(:last-child) {
        @extend .mb-15;
      }
    }
  }
}

// 圆点
.dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-primary);

  &--white {
    background-color: white;
  }

  &--disabled {
    background-color: var(--color-border);
  }

  &--small {
    width: 7px;
    height: 7px;
  }
}

// 标题
.title {
  position: relative;
  font-size: 17px;
  padding-left: 10px;
  margin-bottom: 10px;

  &--border {
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      width: 3px;
      height: 80%;
      background-color: var(--color-primary);
    }
  }
}
